const webpackMerge = require("webpack-merge");
const path = require("path");
const baseWebpackConfig = require("./webpack.base.config")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


module.exports = webpackMerge(baseWebpackConfig,{
    // devtool: 'cheap-module-source-map',
    // 指定构建环境
    mode:"production",
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, '../dist/index.html'), // html模板的生成路径
            template: './src/index.html',//html模板
            inject: true, // true：默认值，script标签位于html文件的 body 底部
            hash: false, // 在打包的资源插入html会加上hash
            //  html 文件进行压缩
            minify: {
                minifyCSS: true,
                removeComments: true,               //去注释
                collapseWhitespace: false,           //压缩空格
                // removeAttributeQuotes: true         //去除属性 标签的 引号  例如 <p id="test" /> 输出 <p id=test/>
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFileName: '[name].[contenthash].chunk.css'
        })
    ],
    module:{
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ],
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'less-loader',
                ],
            },
        ]
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano'), //用于优化\最小化 CSS 的 CSS处理器，默认为 cssnano
                cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给 cssProcessor 的选项，默认为{}
                canPrint: true //布尔值，指示插件是否可以将消息打印到控制台，默认为 true
            }),
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        pure_funcs: ['console.log']//移除console
                    },
                }
            })
        ],
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[contenthash].js',
        publicPath: "/"
    },
})
